<template>
  <div class="content_box">
    <!-- 栏目 -->
    <div class="lanmu_box">
      <div class="box">
        <div class="search">
          <van-search @change="changeTell" @search="searchTell" v-model="param.userTel" placeholder="请输入手机号" />
        </div>
        <div class="tabs">
          <van-tabs v-model="active" @change="tabChange">
            <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <p class="total" v-if="total">共计：<span>{{total}}条</span></p>
    <div class="list_box" v-if="list.length">
     
      <div class="list" v-for="(item,index) in list" :key="index">
        <div class="top">
          <p class="name">{{item.roomName}}</p>
          <p class="status on" v-if="item.orderTotalState==1">进行中</p>
          <p class="status on" v-if="item.orderTotalState==0">已预约</p>
          <p class="status" v-if="item.orderTotalState==2">已完成</p>
          <p class="status" v-if="item.orderTotalState==3">已取消</p>
          <p class="status" v-if="item.orderTotalState==4">待付款</p>
          <p class="status" v-if="item.orderTotalState==5">正在付款</p>
          <p class="status" v-if="item.orderTotalState==6">提前取消</p>
          <p class="status" v-if="item.orderTotalState==7">提前结束</p>
          <p class="status" v-if="item.orderTotalState==8">平台退款</p>
        </div>
        <div class="nr_box">
          <div class="nr">
            <p class="title">用户电话：</p>
            <p @click="callPhone(item.userTel)" class="text" style="color:#1E68FF"> {{item.userTel}}</p>
          </div>
          <div class="nr">
            <p class="title">开始时间：</p>
            <p class="text">{{item.startTime}}</p>
          </div>
          <div class="nr">
            <p class="title">结束时间：</p>
            <p class="text">{{item.endTime}}<span @click="clickTimeShow(item)" v-if="item.orderTotalState==0 || item.orderTotalState==1" class="add_time">增加时长</span></p>
          </div>
          <div class="nr">
            <p class="title">会员折扣：</p>
            <p class="text">{{item.vipDiscount !='0.0'?item.vipDiscount+'折':'--'}}</p>
          </div>
          <div class="nr">
            <p class="title">优惠券折扣：</p>
            <p class="text">{{item.couponContent?item.couponContent:'--'}}</p>
          </div>
          <div class="nr">
            <p class="title">实际支付：</p>
            <p class="text">￥{{item.realPrice}}</p>
          </div>
          <div class="nr">
            <p class="title">支付方式：</p>
            <p class="text">[{{item.payType == 0?'微信支付':item.payType == 1?'余额支付':item.payType == 2?'美团验券':item.payType == 3?'抖音验券':'攒星兑换'}}] ￥{{item.realPrice}}</p>
          </div>
          <div class="nr">
            <p class="title">下单时间：</p>
            <p class="text">{{item.createTime}}</p>
          </div>
        </div>
        <div class="button_box" v-if="item.orderTotalState==0 ||item.orderTotalState==1">
          <!-- <p>待支付</p> -->
          <!-- <p class="on" @click.stop="huanfang(item.id)">更换房间</p> -->
          <p class="jiantou" @click="clickCz(item)">操作</p>
        </div>
      </div>

      <van-popup
        :show="timeShow"
        position="bottom"
        bind:close="onClose"
      >
        <van-picker @cancel="timeCancel" @confirm="changeTime" show-toolbar title="选择时长" :columns="columns" @change="onChange" />
      </van-popup>
      <!-- 弹窗 -->
    <div class="pop_box1">
      <van-popup position="bottom" :show="isAdmin" @close="closePop">
        <div class="box">
          <div class="title">
            <p>订单操作</p>
          </div>
          <div class="list" @click.stop="huanfang">
            <p class="name">更换房间</p>
            <p class="icon">
              更换
            </p>
          </div>
          <div class="list" @click.stop="shifang">
            <p class="name">提前释放时间</p>
            <p class="icon">
              释放
            </p>
          </div>
        
          <p class="quxiao" @click="isAdmin = false">取消</p>
        </div>
      </van-popup>
    </div>
   </div>
   <div class="no_data" v-else>
     <img mode="widthFix" src="/static/images/no_order.png" alt="" />
      <!-- <p class="text"></p> -->
   </div>

    
    <!-- 更换房间 -->
    <div class="pop">
      <van-popup 
        :show="show" 
        @close="onClose"
        close-on-click-overlay
        position="bottom"
      >
        <div class="box">
          <div class="list_box">
            <div class="list_item">
              <div class="list" v-for="(item,index) in hfList" :key="index">
                  <div class="img">
                      <p class="bj">
                          <van-image
                          width="100"
                          height="100"
                          lazy-load
                          :src="item.roomImg&&item.roomImg.length?item.roomImg[0]:''"
                          />
                      </p>
                      <p class="num">
                        <img class="tp" mode="aspectFill" src="/static/images/more_img.png" alt="">
                        {{item.roomImg.length}}
                      </p>
                  </div>
                  <div class="room_msg">
                      <p class="name">{{item.roomName}}</p>
                      <div class="label_box">
                        <p>{{item.introduce}}</p>
                      </div>
                      <div class="price_box">
                        <p class="price"><span>￥</span><span>{{item.price}}/小时</span></p>
                      </div>
                  </div>
                  <div class="room_btn">
                    <p class="btn1" @click="submit(item)">更换</p>
                </div>
              </div>
              
          </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
 
<script>
import { 
  getOrderPageByStore,
  getFreeRoom,
  earlyEndOrder,
  preChangeRoom,
  addOrderTime
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      timeShow:false,
      columns: ['1', '2', '3', '4', '5'],
      lanmu:[
       {name:'全部',query:''},
       {name:'进行中',query:1},
       {name:'预约中',query:0},
       {name:'已完成',query:2},
       {name:'已取消',query:3}
     ],
     show:false,
     param:{
      current:1,
      query:'',
      size:10,
      storeId:'',
      userTel:''
     },
     total:0,
     list:[],
     value:'',
     orderId:'',
     hfList:[],
     isAdmin:false,
     roomMsg:{},
     xTimeMsg:{}
    };
  },
  onShow() {},

  methods: {

    changeTell(e){
      this.param.userTel = e.mp.detail
    },

    searchTell(){
      const phoneRegex = /^1[3-9]\d{9}$/;
      console.log(this.param.userTel)
      if(this.param.userTel){
        if(!phoneRegex.test(this.param.userTel)){
          this.$toast('手机号不对')
        }else{
          this.getList(true)
        }
      }else{
        this.getList(true)
      }
    },

    timeCancel(){
      this.timeShow = false
    },

    clickTimeShow(item){
      console.log(item)
      this.xTimeMsg = item
      this.timeShow = true
    },

    changeTime(e){
      console.log(e)
      let reorderHour = +e.mp.detail.value
      wx.showModal({
        title: "温馨提示",
        content: `确认增加${reorderHour}小时~`,
        confirmText:'确认',
        success: (res)=>{
          if (res.confirm) {
            this.$showLoading("增加中...")
            let newTime = (new Date(this.xTimeMsg.endTime).valueOf())+reorderHour*3600000
            let newTimeMsg = this.getSplicTime(Date.parse(this.xTimeMsg.endTime),newTime)
            let data = {
              startTime:`${newTimeMsg.startTime} ${newTimeMsg.startTimeSlot}:00`,
              endTime:`${newTimeMsg.endTime} ${newTimeMsg.endTimeSlot}:00`,
              orderId:this.xTimeMsg.id,
              reorderHour,
            }
            console.log(data)
            addOrderTime(data).then(res=>{
              if(res.statusCode == '00000'){
                this.timeShow = false
                this.param.current = 1
                this.getList(true)
              }else{
                this.$toast(res.message)
              }
            })
          }
        },
      });
    },


    // 洗时间-续费前后
    getSplicTime(start,end){
      let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let startDate = new Date(start);
      let endDate = new Date(end);
      return {
        startTime:`${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().length == 1
            ? "0" + (startDate.getMonth() + 1).toString()
            : startDate.getMonth() + 1}-${startDate.getDate().toString().length == 1
            ? "0" + startDate.getDate()
            : startDate.getDate()}`,
        endTime:`${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().length == 1
            ? "0" + (endDate.getMonth() + 1).toString()
            : endDate.getMonth() + 1}-${endDate.getDate().toString().length == 1
            ? "0" + endDate.getDate()
            : endDate.getDate()}`,
        startTimeSlot:`${startDate.getHours().toString().length == 1
            ? "0" + startDate.getHours().toString():startDate.getHours()}:${startDate.getMinutes().toString().length == 1
            ? "0" + startDate.getMinutes().toString():startDate.getMinutes()}`,

        endTimeSlot:`${endDate.getHours().toString().length == 1
            ? "0" + endDate.getHours().toString():endDate.getHours()}:${endDate.getMinutes().toString().length == 1
            ? "0" + endDate.getMinutes().toString():endDate.getMinutes()}`,
        startWeek:weeks[startDate.getDay()],
        endWeek:weeks[endDate.getDay()],
        timeLength:this.getHour(start,end)
      }
    },

    // 算选择多少小时
    getHour(s1, s2) {
      let time = s2 - s1
      let timeDate = new Date(time);
      var ms = timeDate.getTime();
      if (ms < 0) return 0;
      return (ms / 1000 / 60 / 60).toFixed(1);  //小时
    },

    // 操作-弹窗
    clickCz(item){
      console.log(item)
      this.roomMsg = item
      this.isAdmin = true
      // this.roomId = item.id
      // if(item.status != 'stop'){
      //   this.checked = true
      // }else{
      //   this.checked = false
      // }
    },

    // 用户电话
    callPhone(tell) {
      wx.makePhoneCall({
        phoneNumber: tell //仅为示例，并非真实的电话号码
      })
    },

    // 换房确认
    submit(item){
      wx.showModal({
        title: '提示',
        content: '确认更换房间？',
        success: (result) => {
          const { confirm } = result
          if (confirm) {
            this.$showLoading("更换中...")
            console.log(item)
            let data = {
              orderId:this.orderId,
              roomId:item.id
            }
            preChangeRoom(data).then(res=>{
              if(res.statusCode == '00000'){
                this.show = false
                wx.hideLoading()
                this.$toast('更换成功')
                this.getList(true)
              }else{
                wx.hideLoading()
                this.$toast(res.message)
              }
            })
          }
        }
      })
      
    },

    // 释放时间
    shifang(){
      wx.showModal({
        title: "温馨提示",
        content: "确定提前释放~",
        confirmText:'确认',
        success: (res)=>{
          if (res.confirm) {
            this.$showLoading("释放中...")
            earlyEndOrder({orderId:this.roomMsg.id}).then(res=>{
              if(res.statusCode == '00000'){
                this.isAdmin = false
                this.param.current = 1
                this.getList(true)
              }else{
                this.$toast(res.message)
              }
            })
          }
        },
      });
    },

    // 换房
    huanfang(){
      this.orderId = this.roomMsg.id
      console.log("换房")
      this.$showLoading("加载中...")
      getFreeRoom({orderId:this.orderId}).then(res=>{
        if(res.statusCode == '00000'){
          if(!res.data.length){
            this.$toast('暂无可换的房间')
            return
          }
          this.hfList = res.data
          this.show = true
          this.isAdmin = false
          wx.hideLoading()
        }else{
          wx.hideLoading()
          this.$toast(res.message)
        }
      })
    },

    // 关闭弹窗
    onClose(){
      console.log("aaa")
      this.show = false
    },

    // 获取列表
    getList(state){
      this.$showLoading("加载中...")
      getOrderPageByStore(this.param).then(res=>{
        if(res.statusCode == '00000'){
          this.total = res.data.total
          if(this.param.current != 1 && !res.data.records.length){
            wx.showToast({
              title: '已经到底了~',
              icon: 'none',
              duration: 1500
            })
            return
          }
          if(state){
            this.param.current = 1
            this.list = []
          }
          this.list = this.list.concat(res.data.records)
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
          this.$toast(res.message)
        }
      })
    },

    // 订单状态切换
   tabChange(e){
     console.log(e)
     let index = e.mp.detail.index
     this.param.current = 1
     this.param.query = this.lanmu[index].query
     this.getList(true)
     wx.vibrateShort({type:'heavy'});
   },
  },
  onLoad(options) {
    console.log(options)
    this.param.storeId = options.storeId
    this.param.query = ''
    this.param.userTel = ''
    this.getList(true)
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.param.current = 1
    this.param.size = 10
    this.getList(true)
  },

 // 上拉加载
 onReachBottom(){
   console.log('到底了')
   this.param.current += 1
   this.getList()
 },
  onHide() {},

  onUnload() {},
};
</script>

<style lang="scss" scoped>
.content_box{
  min-height: 100vh;
  background: #F0F0F0;
  .lanmu_box{
    height: 189rpx;
    .box{
      position: fixed;
      top:0;
      width: 100%;
      z-index: 100;
      .search{
        height: 100rpx;
        /deep/ .van-cell{
          padding: 16rpx 20rpx 10rpx 0 !important;
          font-size:28rpx;
        }
      }
      .tabs{
        height: 89rpx;
      }
    }
    /deep/ .van-tab{
      color:#999;
      font-size:30rpx;
    }
    /deep/ .van-tabs__line{
      background: #1E68FF;
    }
    /deep/ .van-tab--active{
      color:#222;
      font-weight: bold;
    }
  }
  .total{
    margin:24rpx 30rpx;
    font-size:28rpx;
    text-align: right;
    span{
      color:#1E68FF;
    }
  }
  .list_box{
   width: 92%;
   margin:0 auto;
    .list{
      background: #fff;
      border-radius: 8rpx;
      margin-bottom:30rpx;
      .top{
        padding:0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:1px solid #f5f5f5;
        height: 90rpx;
        font-size:30rpx;
        .name{
          font-size:30rpx;
          font-weight: 500;
        }
        .status{
          color:#aaa;
          &.on{
            color:#1E68FF
          }
        }
      }
      .nr_box{
        margin-top:26rpx;
        padding-bottom:30rpx;
        .nr{
          display: flex;
          padding:0 30rpx;
          margin-top:20rpx;
          font-size:28rpx;
          .title{
            color:#999;
          }
        }
      }
      .button_box{
        padding:30rpx;
        padding-top:0;
        display: flex;
        justify-content: flex-end;
     
        .jiantou{
          width: 100rpx;
          height: 40rpx;
          background: #eee;
          border-radius: 50rpx;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          color:#222;
          font-size:26rpx;
        }
      }
    }


   .box{
     border-radius: 15rpx;
     margin-bottom:24rpx;
     .jjz{
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       position: relative;
       .num{
         width: 64%;
         height: 60rpx;
         padding:13rpx 0 0rpx 30rpx;
         background: #fff;
         display: flex;
         align-items: center;
         position: relative;
         z-index: 10;
         font-size:28rpx;
         font-weight: bold;
         color:#222222;
         border-top-left-radius: 15rpx;
         img{
           width: 40rpx;
           height: 40rpx;
           margin-right:10rpx;
         }
         .orderId{
           width: 100%;
           overflow:hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
         }
         .sjx{
           position: absolute;
           width: 20rpx;
           height: 60rpx;
           padding:20rpx 0 0rpx 30rpx;
           text-align: center;
           z-index: 10;
           right:-35rpx;
           top:0;
           color:#fff;
           font-size: 0rpx;
           &::before{
             content:'';
             position:absolute;
             top:0;
             right:0;
             bottom:0;
             left:0;
             background: #fff;
             transform: skew(25deg);
             color:#aaa;
             border-top-right-radius: 15rpx;
           }
         }
       }
       .sbx{
         position: relative;
         width: 190rpx;
         height: 58rpx;
         line-height: 58rpx;
         text-align: center;
         z-index: 5;
         right:15rpx;
         &::before{
           content:'';
           position:absolute;
           top:0rpx;
           right:15rpx;
           bottom:0;
           left:0;
           background: #1E68FF;
           transform: skew(25deg);
           color:#aaa;
           border-top-right-radius: 15rpx;
         }
         span{
           position: relative;
           z-index: 100;
           color:#fff;
           font-size:26rpx;
           font-weight: 500;
           margin-left:15rpx;
         }
         &.sbx_on{
           &::before{
             background: #788933;
           }
         }
       }
     }
     .room_msg{
       background: #fff;
       padding-top:24rpx;
       padding-bottom:24rpx;
       
       .msg{
         background: linear-gradient(to right,#EFF5D6, #CCD9A6);
         height: 178rpx;
         margin:0 26rpx;
         display: flex;
         align-items: center;
         justify-content: space-around;
         text-align: center;
        position: relative;
        .bj{
          position: absolute;
          top:0;
          width: 100%;
          height: 100%;
          z-index: 1;
        }
        .room{
          position: relative;
          z-index: 10;
        }
         .name{
           font-weight: bold;
           color:#222;
           font-size: 34rpx;
           margin-bottom:10rpx;
         }
         .text{
           font-size:24rpx;
         }
       }
     }
     .list_msg{
       color:#666666;
       background: #fff;
       .list{
         padding:0 26rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding-bottom:34rpx;
         font-size:28rpx;
         &:last-child{
           padding-bottom:20rpx;
         }
       }
       &.on{
         color:#979797;
         border-bottom-right-radius: 15rpx;
         border-bottom-left-radius: 15rpx;
       }
     }
     
     .button_box{
       display: flex;
       padding:0 26rpx 26rpx 26rpx;
       background: #fff;
       justify-content: flex-end;
       color:#1E68FF;
       p{
         width: 196rpx;
         height: 68rpx;
         line-height: 68rpx;
         font-size:28rpx;
         border:1px solid #1E68FF;
         border-radius: 6rpx;
         text-align: center;
         margin-left:50rpx;
       }
       .xd{
         background: #1E68FF;
         color:#fff;
       }
       .anniu{
         width: 196rpx;
         height: 72rpx;
         line-height: 72rpx;
         font-size:28rpx;
         border:1px solid #222222;
         border-radius: 6rpx;
         text-align: center;
         background: #fff;
         color:#222;
       }
       button::after {
         border: none;
       }
       button{
         width: 196rpx;
         height: 72rpx;
         line-height: 72rpx;
         font-size:28rpx;
         border:1px solid #222222;
         border-radius: 6rpx;
         text-align: center;
         background: #fff;
         color:#222;
         margin:0;
       }
     }
     .see_xq{
       height: 80rpx;
       line-height: 80rpx;
       background: #fff;
       text-align: center;
       font-size:26rpx;
       color:#222;
     }
     .status1{
       background: #fff;
       padding:26rpx 26rpx 0 26rpx;
       border-top-left-radius: 15rpx;
       border-top-right-radius: 15rpx;
       p{
         display: inline-block;
         padding:8rpx 18rpx;
         background: #f0f0f0;
         font-size:28rpx;
         color:#9a9a9a;
       }
     }
     .name_box{
        font-size:32rpx;
        color:#9a9a9a;
        font-weight: bold;
        padding:0 26rpx;
        background: #fff;
        padding-top:20rpx;
        padding-bottom:26rpx;
        p{
          padding-bottom:24rpx;
          border-bottom:1px solid #f7f7f7;
        }
     }
     &.on{
       filter: grayscale(100%);
       .orderId{
         color:#9A9A9A;
       }
       .msg{
         color:#9A9A9A;
         .name{
           color:#9A9A9A;
         }
       }
       .list_msg{
         color:#9A9A9A;
       }
       .msg{
         background: #F2F2F2;
       }
     }
   }
  }
  .pop{
  /deep/.van-popup{
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    overflow: visible;
  }
  .box{
    width: 100%;
    height: 1000rpx;
    .title{
      padding:30rpx 30rpx 0 30rpx;
      font-size:30rpx;
      font-weight: bold;
    }
    .list_box{
      max-height:96%;
      overflow: auto;
    }
    .list_item{
          padding:30rpx 30rpx 0 30rpx;
          border-radius: 20rpx;
          margin-bottom:20rpx;
          background: #fff;
          border-bottom:1px solid rgba(240, 240, 240, 1);
              .room_btn{
              width: 24%;
              margin-top: 20px;
              text-align: right;
              p{
                  
                  height: 64rpx;
                  text-align: center;
                  line-height: 64rpx;
                  border-radius: 50rpx;
                  font-size:28rpx;
                  border:1px solid transparent;
              }
              .btn1{
                  border: 1px solid rgba(40, 128, 236, 1);;
                  color:rgba(7, 117, 252, 1);
              }
                .btn2{
                  background: linear-gradient(130.23deg, rgba(9, 166, 254, 1) 0%, rgba(7, 117, 252, 1) 100%);
                  color: #fff;
                  padding: 1px;
              }
              .active{
                  opacity: 0.5;
              }
          }
      .list{
          width: 100%;
          display: flex;
          padding-bottom:30rpx;
          .img{
              position: relative;
              .bj{
                  width: 170rpx;
                  height: 170rpx;
                  // background: #aaa;
                  border-radius: 10rpx;
                  overflow: hidden;
                  img{
                      width: 100%;
                      height: 100%;
                  }
              }
              .num{
                  position: absolute;
                  bottom:20rpx;
                  right:10rpx;
                  padding:0rpx 20rpx;
                  background: rgba(0, 0, 0,0.5);
                  border-radius: 30rpx;
                  color:#fff;
                  font-size:26rpx;
                  display: flex;
                  align-items: center;
                  img{
                      width: 26rpx;
                      height: 26rpx;
                      margin-right:10rpx;
                  }
              }
              .sy{
                  position: absolute;
                  top:0;
                  left: 0;
                  width: 120rpx;
                  height: 40rpx;
                  background: rgba(7, 117, 252, 1);
                  color:#fff;
                  font-size:24rpx;
                  border-top-left-radius: 10rpx;
                  border-bottom-right-radius: 10rpx;
                  text-align: center;
                  line-height: 40rpx;
              }
          }
      
          .room_msg{
              margin-left:20rpx;
              flex: 1;
              .name{
                  color:rgba(35, 35, 35, 1);
                  font-size:34rpx;
                  font-weight: bold;
              }
              .label_box{
                  display: flex;
                  font-size:26rpx;
                  color:rgba(102, 102, 102, 1);
                  margin:10rpx 0 40rpx 0;
                  p{
                      margin-right:20rpx;
                  }
              }
              .price_box{
                  display: flex;
                  justify-content: space-between;
                  .price{
                      color:rgba(7, 117, 252, 1);
                      font-size:34rpx;
                      font-weight: bold;
                      span{
                          font-size:24rpx;
                          font-weight: 500;
                      }
                  }
                  .anniu{
                      width: 150rpx;
                      height: 50rpx;
                      text-align: center;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      border:1px solid #aaa;
                      font-size:28rpx;
                      border-radius: 10rpx;
                  }
              }
          }
      }
    }
  }
}
.no_data{
   text-align: center;
   font-size:28rpx;
   color:#333;
   padding-top:350rpx;
   .text{
     font-weight: bold;
     color:#999;
   }
   img{
     width: 248rpx;
     margin-bottom:10rpx;
   }
   .button{
     width: 240rpx;
     height: 70rpx;
     line-height: 70rpx;
      background: #02b4ae;
     // background: #35c982;
     border-radius: 120rpx;
     text-align: center;
     font-size: 30rpx;
     color: #fff;
     margin-top: 30rpx;
     margin: 30rpx auto 0 auto;
   }
 }
 .pop_box1{
    /deep/ .van-popup {
      border-top-right-radius: 20rpx !important;
      border-top-left-radius: 20rpx !important;
    }
    .box{
      .title{
        height: 104rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#323233;
        font-size:34rpx;
        border-bottom:1px solid #f0f0f0;
        position: relative;
        .tb{
          position: absolute;
          right:30rpx;
        }
      }
      .list{
        height: 104rpx;
        border-bottom:1px solid #f5f5f5;
        padding:0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size:32rpx;
          color:#323233;
        }
        .icon{
          width: 196rpx;
          height: 60rpx;
          display:flex;
          align-items: center;
          justify-content: center;
          border:1px solid #222;
          color:#222;
          font-size:28rpx;
          font-weight: 500;
          border-radius: 50rpx;
          &.on{
            opacity: 0.5;
          }
        }
        div{
          display: flex;
        }
        .tips{
          font-size:24rpx;
          color:red;
          margin-top:10rpx;
        }
        img{
          width: 32rpx;
          height: 32rpx;
          margin-right:10rpx;
        }
      }
      .line{
        width: 100%;
        height: 16rpx;
        background: #f8f8f8;
      }
      .quxiao{
        height: 100rpx;
        line-height: 100rpx;
        font-size:32rpx;
        color:#323233;
        text-align: center;
      }
    }
  }
  .add_time{
    margin-left:20rpx;
    color:#1E68FF;
    text-decoration: underline;
  }
}
</style>
